Skip to main content

04 导航流程

在浏览器里，从输入 URL 到页面展示，涉及到了网络、操作系统、Web 等一系列的知识。

从输入 URL 到页面展示完整流程示意图

整个过程需要各个进程之间的配合，浏览器进程、渲染进程和网络进程的主要职责：

  • 浏览器进程主要负责用户交互、子进程管理和文件储存等功能。
  • 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。
  • 渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。

整个流程大致如下：

  1. 浏览器进程接收到用户输入的 URL 请求，浏览器进程将该 URL 转发给网络进程。
  2. 网络进程发起真正的 URL 请求。
  3. 网络进程接收到响应头数据，解析响应头数据，并将数据转发给浏览器进程。
  4. 浏览器进程接收到网络进程的响应头数据之后，发送**提交导航 (CommitNavigation)**消息到渲染进程；
  5. 渲染进程接收到提交导航的消息后，直接和网络进程建立数据管道，开始准备接收 HTML 数据；
  6. 渲染进程会向浏览器进程确认提交，告诉浏览器进程已经准备好接受和解析页面数据。
  7. 浏览器进程接收到渲染进程提交文档的消息后，开始移除之前旧的文档，更新浏览器进程中的页面状态。

用户发出 URL 请求到页面开始解析的过程，就叫做导航。

从输入 URL 到页面展示​

用户输入​

当用户在地址栏中输入一个查询关键字时，地址栏会判断输入的关键字是搜索内容，还是请求的 URL。

  • 是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。
  • 内容符合 URL 规则，地址栏会根据规则，把这段内容加上协议，合成为完整的 URL。

当前页面即将要被替换成新的页面之前，浏览器提供 beforeunload 事件允许页面在退出之前执行一些数据清理操作，可以询问用户是否要离开当前页面（比如当前页面可能有未提交完成的表单等情况），可以通过 beforeunload 事件来取消导航，让浏览器不再执行任何后续工作。

当浏览器刚开始加载一个地址之后，标签页上的图标便进入加载状态。但此时页面显示的依然是之前打开的页面内容，并没立即替换为极客时间的页面。因为需要等待提交文档阶段，页面内容才会被替换。

URL 请求过程​

页面资源请求过程，浏览器进程会通过进程间通信（IPC）把 URL 请求发送至网络进程，网络进程接收到 URL 请求后，会在这里发起真正的 URL 请求流程。

网络进程会查找本地缓存是否缓存了该资源。如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接进入网络请求流程。这请求前的第一步是要进行 DNS 解析，以获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS，还需要建立 TLS 连接。

接下来利用 IP 地址和服务器建立 TCP 连接。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。

服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息），并发给网络进程。等网络进程接收了响应行和响应头之后，就开始解析响应头的内容了。

重定向​

接收到服务器返回的响应头后，网络进程开始解析响应头，如果发现返回的状态码是 301 或者 302，说明服务器需要浏览器重定向到其他 URL。这时网络进程会从响应头的 Location 字段里面读取重定向的地址，然后再发起新的 HTTP 或者 HTTPS 请求，一切重头开始。

curl -I [http://time.geekbang.org/](http://time.geekbang.org/)

curl -I [https://time.geekbang.org/](https://time.geekbang.org/)

响应数据类型处理​

Content-Type 告诉浏览器服务器返回的响应体数据是什么类型，浏览器会根据 Content-Type 的值来决定如何显示响应体的内容。

curl -I [https://time.geekbang.org/](https://time.geekbang.org/)

curl -I [https://res001.geekbang.org/apps/geektime/android/2.3.1/official/geektime_2.3.1_20190527-2136_offical.apk](https://res001.geekbang.org/apps/geektime/android/2.3.1/official/geektime_2.3.1_20190527-2136_offical.apk)

Content-Type 字段的值被浏览器判断为下载类型，该请求会被提交给浏览器的下载管理器，同时该 URL 请求的导航流程就此结束。如果是 HTML，浏览器则会继续进行导航流程。Chrome 的页面渲染是运行在渲染进程中的，接下来就需要准备渲染进程了。

准备渲染进程​

默认情况下，Chrome 会为每个页面分配一个渲染进程，每打开一个新页面就会配套创建一个新的渲染进程。但如果从一个页面打开的新页面和当前页面属于同一站点，新页面会复用父页面的渲染进程。

同一站点定义为根域名加上协议，还包含了该根域名下的所有子域名和不同的端口：

https://time.geekbang.org
https://www.geekbang.org
https://www.geekbang.org:8080

渲染进程准备好之后，需要等网络进程中的文档数据准备好之后提交给渲染进程，才能进入文档解析状态。

提交文档​

浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程：

  • 当浏览器进程接收到网络进程的响应头数据之后，向渲染进程发起提交文档的消息；
  • 渲染进程接收到提交文档的消息后，会和网络进程建立传输数据的管道；
  • 等文档数据传输完成之后，渲染进程会返回确认提交的消息给浏览器进程；
  • 浏览器进程在收到确认提交的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。

渲染阶段​

一旦文档被提交，渲染进程便开始页面解析和子资源加载，页面生成完成后，渲染进程会发送一个消息给浏览器进程，浏览器接收到消息后，会停止标签图标上的加载动画。